<template>
    <div>
        <el-form ref="form" :model="formData" label-width="80px">
            <div style="    margin-bottom: 10px;">
                <el-radio-group v-model="formData.typeId" size="small" @change="onSubmit">
                    <el-radio-button :label="1">费用报销</el-radio-button>
                    <el-radio-button :label="2">付款申请</el-radio-button>
                </el-radio-group>
            </div>
            <el-form-item prop="date" label="开票日期">
                <datePicker
                    :form="formData"
                    formId="date"
                    startTime="startTime"
                    endTime="endTime"
                    valueformat="yyyy-MM-dd"
                    size="small"
                ></datePicker>
            </el-form-item>
            <el-form-item prop="invoiceNumber" label="发票号">
                <el-input v-model="formData.invoiceNumber" placeholder="请输入发票号" size="small"></el-input>
            </el-form-item>
            <el-form-item prop="billingCompany" label="开票公司" v-if="formData.typeId === 2">
                <el-input v-model="formData.billingCompany" placeholder="请输入开票公司" size="small"></el-input>
            </el-form-item>
            <el-form-item prop="userIdList" :label="formData.typeId ===  2?'申请人':'报销人'">
                <el-select
                    v-model="formData.userIdList"
                    multiple
                    collapse-tags
                    filterable
                    clearable
                    :placeholder="'请选择'+ (formData.typeId===  2?'申请人':'报销人')"
                    size="small"
                >
                    <allAddDelSelect
                        :selectForm="formData"
                        :selectArray="userSelect"
                        selectFormId="userIdList"
                        selectArrayId="userId"
                        size="mini"
                    ></allAddDelSelect>
                    <el-option
                        v-for="item in userSelect"
                        :key="item.kay"
                        :label="item.userDisplayName"
                        :value="item.userId"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="15px">
                <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">搜索</el-button>
                <el-button @click="resetForm('form')" icon="el-icon-circle-close" size="small">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template> 
<script>
import datePicker from "components/searchfor/date-picker.vue";
const ERR_OK = 200;
export default {
    data() {
        return {
            formData: {
                billingCompany: "",
                typeId: 1,
                cUser: this.$store.getters.userId,
                pageNumber: 1,
                pageSize: 20
            },
            userSelect: []
        };
    },
    created() {
        this.onSubmit();
        this.getUser();
    },
    methods: {
        getUser() {
            this.$ajax
                .get(this.GLOBAL.loginService + "/getDepartmentUser/1/1")
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.userSelect = res.data.data;
                    }
                });
        },
        onSubmit() {
            this.$emit("onSubmit", this.formData);
        },
        resetForm(formName) {
            this.formData.startTime = "";
            this.formData.endTime = "";
            this.$refs[formName].resetFields();
        }
    },
    components: {
        datePicker,
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve)
    }
};
</script>
<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
    margin-bottom: 10px;

    .el-date-editor {
        max-width: 230px;
    }
}
</style>